<template>
  <div class="product">
    <!--添加菜单&权限-->
    <div class="common-level-rail d-b-c">
      <el-button type="primary" @click="addClick" icon="Plus"
        >添加菜单&权限</el-button
      >
      <el-form :inline="true" :model="formSearch" size="small">
        <el-form-item>
          <el-checkbox v-model="formSearch.isMenu" @change="changeIsMenuFunc"
            >只显示菜单</el-checkbox
          >
          <el-checkbox v-model="formSearch.packUp" @change="changePackUpFunc"
            >收起</el-checkbox
          >
        </el-form-item>
      </el-form>
    </div>
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <div>
          <el-table
            size="small"
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="accessId"
            border
            default-expand-all
            ref="theTable"
            :tree-props="{ children: 'children' }"
            v-loading="loading"
          >
            <el-table-column prop="name" label="菜单名称">
              <template #default="scope">
                <span v-if="scope.row.path == '/plus'" class="fb red f18">
                  {{ scope.row.name }}
                </span>
                <span v-else>
                  {{ scope.row.name }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="path" label="路径"></el-table-column>
            <el-table-column prop="isRoute" label="类别" width="90">
              <template #default="scope">
                <span v-if="scope.row.isRoute == 1">页面</span>
                <span v-if="scope.row.isRoute == 0">按钮</span>
                <span v-if="scope.row.isRoute == 2">独立单页面</span>
              </template>
            </el-table-column>
            <el-table-column prop="isShow" label="是否显示" width="80">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.isShow"
                  :active-value="1"
                  :inactive-value="0"
                  @change="isShowFunc(scope.row)"
                  active-color="#13ce66"
                  inactive-color="#cccccc"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="isSupplier" label="门店菜单" width="80">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.isSupplier"
                  :active-value="1"
                  :inactive-value="0"
                  @change="isSupplierFunc(scope.row)"
                  active-color="#13ce66"
                  inactive-color="#cccccc"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="sort"
              label="排序"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="添加时间"
              width="140"
            ></el-table-column>
            <el-table-column prop="name" label="操作" width="230">
              <template #default="scope">
                <el-button
                  @click="addClick(scope.row, 'copy')"
                  link
                  type="primary"
                  size="small"
                  v-if="scope.row.path != '/plus'"
                  >一键复制</el-button
                >
                <el-button
                  @click="addClick(scope.row, 'child')"
                  link
                  type="primary"
                  size="small"
                  >添加子菜单</el-button
                >
                <el-button
                  @click="editClick(scope.row)"
                  link
                  type="primary"
                  size="small"
                  >编辑</el-button
                >
                <el-button
                  @click="deleteClick(scope.row)"
                  link
                  type="primary"
                  size="small"
                  v-if="scope.row.path != '/plus'"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--添加-->
    <Add
      v-if="open_add"
      :open_add="open_add"
      :add_type="add_type"
      :rawData="rawData"
      :selectModel="selectModel"
      @closeDialog="closeDialogFunc($event, 'add')"
    ></Add>

    <!--编辑-->
    <Edit
      v-if="open_edit"
      :open_edit="open_edit"
      :rawData="rawData"
      :selectModel="selectModel"
      @closeDialog="closeDialogFunc($event, 'edit')"
    ></Edit>
  </div>
</template>
<script>
import AccessApi from "@/api/access.js";
import Edit from "./part/Edit.vue";
import Add from "./part/Add.vue";
import { deepClone } from "@/utils/base.js";
export default {
  components: {
    /*编辑组件*/
    Edit: Edit,
    Add: Add,
  },
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*筛选搜索*/
      formSearch: {
        /*是否只显示菜单*/
        isMenu: false,
        /*是否收起*/
        packUp: false,
      },
      /*原始数据*/
      rawData: [],
      /*表格数据*/
      tableData: [],
      /*是否打开添加弹窗*/
      open_add: false,
      /*添加类型*/
      add_type: "",
      /*选中的对象*/
      selectModel: {},
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {},
    };
  },
  created() {
    /*获取列表*/
    this.getTableList();
  },
  methods: {
    /*列表是否只显示菜单*/
    changeIsMenuFunc(e) {
      let list = deepClone(this.rawData);
      console.log("list", list);
      if (e) {
        this.showScreen(list, 1);
        this.tableData = list;
      } else {
        this.tableData = list;
      }
    },

    /*是否显示开关*/
    isShowFunc(e) {
      let self = this;
      AccessApi.status({ id: e.accessId, status: e.isShow }, true)
        .then((data) => {
          if (data.code == 1) {
            ElMessage({
              message: data.msg,
              type: "success",
            });
            self.getTableList();
          }
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*是否显示开关*/
    isSupplierFunc(e) {
      let self = this;
      AccessApi.supplier({ id: e.accessId, status: e.isSupplier }, true)
        .then((data) => {
          if (data.code == 1) {
            ElMessage({
              message: data.msg,
              type: "success",
            });
            self.getTableList();
          }
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*是否收起*/
    changePackUpFunc(e) {
      this.forArr(this.tableData, !e);
    },

    /*列表收起*/
    forArr(arr, isExpand) {
      arr.forEach((i) => {
        this.$refs.theTable.toggleRowExpansion(i, isExpand);
        if (i.children) {
          this.forArr(i.children, isExpand);
        }
      });
    },

    /*切换显示类别*/
    changeShowFunc(e) {
      let list = deepClone(this.rawData);
      if (e == "all") {
        this.tableData = list;
      } else {
        let type;
        if (e == "show") {
          type = 1;
        }
        if (e == "hide") {
          type = 0;
        }
        this.showScreen(list, type);
        this.tableData = list;
      }
    },

    /*显示筛选*/
    showScreen(list, type) {
      for (let i = 0; i < list && list.length; i++) {
        let item = list[i];
        if (typeof item.isMenu != "undefined" && item.isMenu != type) {
          list.splice(i, 1);
          i--;
        } else {
          if (item.children.length > 0) {
            this.showScreen(item.children, type);
          }
        }
      }
    },

    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = {};
      AccessApi.accessList(Params, true)
        .then((res) => {
          self.loading = false;
          self.rawData = res.data;
          self.tableData = res.data;
        })
        .catch((error) => {
          self.loading = false;
        });
    },

    /*打开添加*/
    addClick(e, type) {
      if (e && typeof e != "undefined") {
        this.add_type = type;
        this.selectModel = deepClone(e);
      } else {
        this.parentsId = 0;
      }
      this.open_add = true;
    },

    /*打开编辑*/
    editClick(item) {
      this.selectModel = item;
      this.open_edit = true;
    },

    closeDialogFunc(e, f) {
      if (f == "add") {
        this.open_add = e.openDialog;
        if (e.type == "success") {
          this.getTableList();
        }
      }
      if (f == "edit") {
        this.open_edit = e.openDialog;
        if (e.type == "success") {
          this.getTableList();
        }
      }
    },

    /*删除用户*/
    deleteClick(row) {
      let self = this;
      ElMessageBox.confirm("删除后不可恢复，确认删除该记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.loading = true;
          AccessApi.delAccess(
            {
              id: row.accessId,
            },
            true
          )
            .then((data) => {
              if (data.code == 1) {
                self.loading = false;
                ElMessage({
                  message: data.msg,
                  type: "success",
                });
                self.getTableList();
              }
            })
            .catch((error) => {
              self.loading = false;
            });
        })
        .catch(() => {});
    },
  },
};
</script>
